<template>
  <div class="app-container">
    <TopNav />
    <div class="main-container">
      <Sidebar />
      <router-view />
    </div>
  </div>
</template>

<script setup>
import TopNav from './components/TopNav.vue';
import Sidebar from './components/Sidebar.vue';
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: #31378bff;
}

.main-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.home {
  padding: 20px;
  color: #d1a8a8ff; 
  font-size: 16px;
  line-height: 1.6;
}
</style>